/*  指定编码集： utf-8   通配选择器页面元素统一  
                        文本设定16px,字体家族： 微软雅黑
						超链接、列表样式去掉、盒子模型：元素默认存在外边框
	给父元素添加效果： 宽高500*200  边框： 1px
	给所有子元素添加效果：宽高100*100  背景颜色，  字体大小自定
					    字体垂直居中，所有子元素左浮动
						每一个子元素必须颜色不同
						*/
/* 指定编码集  utf-8 */
@charset "utf8";
/*  通配选择器  */
*{
	/*  字体简写属性  */
	font: 16px "微软雅黑";
	text-decoration: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
/*  父级元素  */
#father{
	/*  浮动卡住：第一步，父元素宽度  498px  */
	/*  浮动卡住解决方案1：给父级加宽  */
	width: 498px;
	/*  塌陷解决方案1: 加高  经验  */
	height: 200px;
	/*  塌陷解决方案2： 加溢出，子浮动元素算溢出,推荐  */
	overflow: hidden;
	border: 10px solid lightblue;
}
/*  选择器权值问题： 如果不够，给一个选择器添加效果，协同给几个元素添加效果
                   群组选择器，不同元素，统一添加效果
				   */
div.d1,	div.d2,div.d3,div.d4,div.d5{
	width: 100px;
	height: 100px;
	background-color: aliceblue;
	/*  浮动一定产生问题  */
	float: left;
	font-size: 2em;
	/*  文字垂直居中  */
	text-align: center;
	line-height: 100px;
}			  
div#father div.d1{
	/*  浮动不够，卡住  第二步 d1高度   */
	he ight: 130px;
	background-color: #ffaa00;
	color: aquamarine;
}
div#father div.d2{
	/*  浮动不够，卡住  宽度微小  */
	height: 101px;
	background-color: #ffaaff;
	color: #aaaaff;
}
div#father div.d3{
	background-color: #34daff;
	color: #fffbc1;
}
div#father div.d4{
	background-color: #aaaaff;
	color: #ff007f;
}
div#father div.d5{
	background-color: #55ff7f;
	color: #55aaff;
	/*  清除浮动来解决卡住问题：纵向还是横向  */
	clear: both;
}